<!-- 在App.vue总要写三个标签，template负责html，script负责js，style负责样式 -->
<template>
  <div class="person">
    <h1>sum: {{ sum }}</h1>
    <button @click="add">sum+=1</button>
    <hr>
    <img v-for="(dog, index) in dogList" :src="dog" :key="index">
    <br>
    <button @click="getDog">new dog</button>
  </div>
</template>


<script setup name="Person" lang="ts">//加上setup就是语法糖，自动返回，但是组件名要另外写，通过name属性来设置
import useSum from "@/hooks/useSum"
import useDog from "@/hooks/useDog"

const { sum, add } = useSum()    
const {dogList, getDog } = useDog()
</script>
  
<style scoped>
  .person {
    width: 100%;
    height: 100%;
    background-color: pink;
  }
  img {
    width: 100px;
    margin-right: 10px;
  }
</style>
